<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, type Ref } from 'vue';
import { showNotify } from 'vant';
import My from '@/views/my/index.vue'

const show: Ref<any> = ref(false)
const checked: Ref<boolean> = ref(false)
const router = useRouter()
const route = useRoute()
const isstate: string | null = localStorage.getItem('isstate')
let token: string | null = ''

show.value = route.query.from

if (isstate == 'true') {
    token = localStorage.getItem('token')
} else {
    token = null
}

function loginClick() {
    if (checked.value == true) {
        localStorage.setItem('token', '123456')
        localStorage.setItem('isstate', 'true')
        show.value = false
        token = localStorage.getItem('token')
        router.push('/mylogin')
    } else {
        showNotify({
            message: '请先仔细阅读条款',
            color: '#ad0000',
            background: '#ffe1e1',
        });
    }
}



</script>

<template>
    <My v-if="token" />

    <div class="my" v-else>
        <van-action-sheet v-model:show="show" title="登录享受更多服务">
            <div class="content-Bullet">
                <div class="content-login">
                    <p style="font-size: 22px;color: #000;">136****5678</p>
                    <button @click="loginClick">一键快捷登录</button>
                </div>

                <div class="content-other">
                    <p style="color: #999;font-size: 13px;">其他登录方式</p>
                    <div class="content-other-image">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u320.svg"></van-image>
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u321.svg"></van-image>
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u322.svg"></van-image>
                    </div>
                </div>

                <div class="content-bottom">
                    <span><van-checkbox name="b" icon-size="10px" v-model:model-value="checked"></van-checkbox> <span
                            style="color:#999999;">我已阅读并同意</span></span><span
                        style="color:#3478F6;">《中国移动认证服务条款》,《服务协议》</span><span style="color:#999999;">和</span><span
                        style="color:#3478F6;">《个人信息保护指引》</span>
                </div>
            </div>
        </van-action-sheet>


        <header class="my-header">
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u365.svg"></van-image>
            <van-image
                src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u302.svg"></van-image>
        </header>

        <main class="my-main">

            <div class="my-content-top">
                <p style="color: #333;font-size: 16px;">登录小默旅行，体验更多功能</p>
                <div class="my-image">
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u323.svg"
                        @click="show = true"></van-image>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u320.svg"
                        @click="$router.push('mycode')"></van-image>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u321.svg"
                        @click="$router.push('mypassword')"></van-image>
                    <van-image
                        src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u322.svg"
                        @click="$router.push('mychat')"></van-image>
                </div>
            </div>

            <div class="my-content-main">
                <p style="position: relative; top: 10px;left: 10px; font-size: 14px; font-weight: bold;">我的门票</p>
                <div class="content">
                    <div class="order">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u333.svg"></van-image>
                        <p>全部门票</p>
                    </div>
                    <div class="order">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u331.svg"></van-image>
                        <p>待付款</p>
                    </div>
                    <div class="order">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u332.svg"></van-image>
                        <p>未使用</p>
                    </div>
                    <div class="order">
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u330.svg"></van-image>
                        <p>待评价</p>
                    </div>
                </div>
            </div>
            <div class="my-content-bottom">
                <p style="position: relative; top: 10px;left: 10px; font-size: 14px; font-weight: bold;">基础服务</p>

                <van-grid square>
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u361.svg"
                        text="我要发布" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u349.svg"
                        text="酒店订单" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u352.svg"
                        text="我的机票" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u343.svg"
                        text="我的车票" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u340.svg"
                        text="我的金币" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u364.svg"
                        text="我的收藏" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u358.svg"
                        text="联系客服" />
                    <van-grid-item
                        icon="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%88%91%E7%9A%84_%E6%9C%AA%E7%99%BB%E5%BD%95/u337.svg"
                        text="意见反馈" />
                </van-grid>

            </div>

        </main>
    </div>
</template>

<style scoped lang="scss">
.my {
    width: 100%;
    height: 100%;

    .content-Bullet {
        width: 100%;
        height: 320px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;

        button {
            width: 180px;
            height: 45px;
            background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
            border-radius: 10px;
            color: white;
            border: 0;
        }

        .content-other {
            width: 40%;

            .content-other-image {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }

        .content-bottom {
            width: 65%;
            margin-bottom: 20px;

            .van-checkbox {
                position: relative;
                top: 10px;
                right: 10px;
            }
        }


    }

    .my-header {
        height: 130px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 44%, rgba(247, 247, 247, 1) 98%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;

        .van-image {
            width: 18px;
            height: 18px;
            margin-bottom: 20px;

        }
    }

    .my-main {
        height: calc(100% - 50px);
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 44%, rgba(247, 247, 247, 1) 98%);
        border-radius: 20px;
        position: relative;
        bottom: 20px;

        .my-content-top {
            width: 90%;
            height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 15px;


            .my-image {
                width: 200px;
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            }
        }



        .my-content-main {
            width: 90%;
            height: 110px;
            background-color: white;
            margin: 10px auto;
            border-radius: 10px;

            .content {
                display: flex;
                justify-content: space-around;
                background-color: white;
                align-items: center;
                height: 100%;

                .van-image {
                    position: relative;
                    left: 7px;
                }
            }


        }

        .my-content-bottom {
            width: 90%;
            height: 205px;
            background-color: white;
            margin: 20px auto;
        }


    }
}
</style>